<template>
  <div class="admin-header">
    <!-- logo -->
    <div>
      <img src="~assets/img/admin_logo.jpg" alt="" @click="toIndex" />
      <span>白卷后台</span>
    </div>
    <!-- 登出按钮 -->
    <el-button type="info" @click="logout">登出</el-button>
  </div>
</template>

<script>
export default {
  name: "AdminHeader",
  data() {
    return {};
  },
  methods: {
    async logout() {
      const { data: res } = await this.$http.get("/logout");
      if (res.code !== 200) this.$message.error("登出失败");
      this.$message.success("登出成功");
      this.$store.commit("logout");
      window.sessionStorage.clear();
      window.localStorage.clear();
      this.$router.push("/");
    },
    toIndex() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.admin-header {
  height: 60px;
  width: 100%;
  min-width: 360px;

  background-color: #373d41;
  color: #ffffff;
  // padding-left: 0;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  div {
    height: 100%;
    display: flex;
    align-items: center;
    img {
      height: 60%;
      margin-left: 10px;

      cursor: pointer;
    }
    span {
      margin-left: 15px;
    }
  }

  .el-button {
    margin-right: 20px;
  }
}
</style>